//1. 页面顶部广告栏 ------------------------------------------------
//获取广告x按钮 需要获取广告容器按钮
let close = document.querySelector('.close')
let advert = document.querySelector('.advert')
//点击 广告x按钮
close.onclick = function () {
    advert.style.display = 'none'
}

//2.城市选择-------------------------------------------------------
let header_l = document.querySelector('.header_l')
let select = document.querySelector('.select')
let cityName = document.querySelector('.location span')
//先获取上级元素DOM   上级元素DOM.querySelectorAll() 从当前的上级DOM元素继续找元素
let items = select.querySelectorAll('.item a')
console.log(items);
header_l.onmouseover = function () {
    select.style.display = 'block'
}
header_l.onmouseout = function () {
    select.style.display = 'none'
}
//点击下拉框里面的城市名称--定位上的默认名称进行切换 ---事件委托---
select.addEventListener('click', function (e) {
    //e.target 当前的目标元素  e.currentTarget 父元素
    // console.log(e.target);
    // console.log(e.currentTarget);
    // console.log(e.target==e.currentTarget);
    if (e.target == e.currentTarget) {
        return;
    }
    cityName.innerHTML = e.target.innerHTML;
    //删除其他元素的样式
    for (let i = 0; i < items.length; i++) {
        items[i].style.background = ''
        items[i].style.color = ''
    }
    //修改选中的样式
    e.target.style.background = '#ff5555'
    e.target.style.color = '#fff'
})


    //3. 搜索框--文字自动切换选择----------------
    ; (function () {
        let input = document.getElementById('input');//输入框
        let J_searchbg = document.getElementById('J_searchbg');//搜索的文字容器
        //希望input输入框的文字每隔3000毫秒修改一次数据
        //提供一个模拟数据
        let arr = ['美的饮水机', '芭比娃娃', '笔记本硬盘', '雅马哈电钢琴', '电脑主机', '网络机顶盒', '联想一体机电脑', '苹果笔记本', '婴幼儿奶粉']
        let timer = null;
        let i = -1;
        timer = setInterval(change, 3000)
        function change() {
            i++;
            if (i == arr.length) {
                i = 0;
            }
            J_searchbg.innerHTML = arr[i];
        }
        //聚焦-暂停
        input.onfocus = function () {
            //清空计时器
            clearInterval(timer)
            J_searchbg.style.color = '#c8c8c8'
        }
        //失去焦点-加上计时器--判断当前的输入框有咩有内容
        input.onblur = function () {
            if (!input.value) {
                timer = setInterval(change, 3000)
                J_searchbg.style.color = '#989898'
            }
        }
        input.oninput = function () {
            J_searchbg.innerHTML = ''
            //清空计时器
            clearInterval(timer)
        };
    })()

    //4. 选项卡----------------------------
    ; (function () {
        //获取左侧大容器 --离开容器隐藏内容展示
        let fs_col1 = document.querySelector('.fs_col1')
        //获取左侧lis 
        let lis = document.querySelectorAll('.cate_menu li');
        //获取下面的显示的容器
        let cate_pop = document.querySelector('.cate_pop')
        //获取下面的所有的容器
        let boxs = document.querySelectorAll('.cate_part')
        //给lis加事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function () {
                cate_pop.style.display = 'block'
                //去掉
                for (let j = 0; j < lis.length; j++) {
                    lis[j].className = 'cate_menu_item'
                    boxs[j].style.display = 'none'
                }
                this.className = 'cate_menu_item cate_menu_item_on'
                boxs[i].style.display = 'block'
            }
        }

        //鼠标离开
        fs_col1.onmouseleave = function () {
            cate_pop.style.display = 'none'
            //去掉高亮
            for (let j = 0; j < lis.length; j++) {
                lis[j].className = 'cate_menu_item'
                boxs[j].style.display = 'none'
            }
        }


    })()

    //5. 轮播图-------------------------
    ; (function () {
        //1. 获取所有操作的元素
        let sliderBanner = document.querySelector('.sliderBanner');//最大轮播盒子
        let lis = sliderBanner.querySelectorAll('li');//轮播图容器li =[li,li,li,li]
        let circles = sliderBanner.querySelectorAll('.circle span');//轮播点
        // icon-zuojiantou1
        let prev = sliderBanner.querySelector('.icon-zuojiantou1')
        let next = sliderBanner.querySelector('.icon-youjiantou1')
        let index = 0;//轮播的下标从0开始
        //实现轮播效果
        function lunbo() {
            index++;
            //index++ 下标元素递增 有尽头 
            if (index == lis.length) {
                index = 0;
            }
            // console.log('轮播下标位置',index);
            //其他的lis元素隐藏
            for (let i = 0; i < lis.length; i++) {
                lis[i].className = ''
                circles[i].className = ''
            }
            //当前的位置index 下标li显示
            lis[index].className = 'show'
            //轮播点高亮
            circles[index].className = 'active'
        }
        //计时器
        let timer = null;
        timer = setInterval(lunbo, 2000);
        //右侧箭头
        next.addEventListener('click', lunbo);
        //左箭头
        prev.addEventListener('click', function () {
            index--;
            if (index == -1) {//index=0 index--=-1 显示最后一个图片 最后一个图下标=长度-1
                index = lis.length - 1;
            }
            console.log('轮播下标位置', index);
            //其他的lis元素隐藏
            for (let i = 0; i < lis.length; i++) {
                lis[i].className = ''
                circles[i].className = ''
            }
            //当前的位置index 下标li显示
            lis[index].className = 'show'
            //轮播点高亮
            circles[index].className = 'active'
        });
        //悬浮到中间轮播区域---暂停轮播
        sliderBanner.onmouseenter = function () {
            clearInterval(timer)
        }
        //离开加上计时器
        sliderBanner.onmouseleave = function () {
            timer = setInterval(lunbo, 2000);
        }
        //点击轮播点--切换轮播图播放
        for (let i = 0; i < circles.length; i++) {
            circles[i].onclick = function () {
                //其他的lis元素隐藏
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                    circles[i].className = ''
                }
                this.className = 'active'
                lis[i].className = 'show'
            }
        }

    })()

    //6. 主轮播-右侧轮播
    ; (function () {
        let items = document.querySelectorAll('.sliderRecommendWrapper .item')
        //icon-zuojiantou1  icon-youjiantou1
        let prev = document.querySelector('.sliderRecommendWrapper .icon-zuojiantou1')
        let next = document.querySelector('.sliderRecommendWrapper .icon-youjiantou1')
        let index = 0;//下标开始位置
        //右侧按钮--- 
        next.onclick = function () {
            index++;
            if (index == items.length) {
                index = 0;
            }
            //其他隐藏 当前显示
            for (let i = 0; i < items.length; i++) {
                items[i].style.display = 'none'
            }
            items[index].style.display = 'block'
        }

        //左侧按钮--- 
        prev.onclick = function () {
            index--;
            if (index == -1) {
                index = items.length - 1;
            }
            //其他隐藏 当前显示
            for (let i = 0; i < items.length; i++) {
                items[i].style.display = 'none'
            }
            items[index].style.display = 'block'
        }


    })()

    //7. 京东秒杀 活动结束时间------------------
    /* 
            <span class="timmer__unit timmer__unit--hour">00</span>
            <span class="timmer__unit timmer__unit--minute">55</span>
            <span class="timmer__unit timmer__unit--second">29</span>
    */
    // ;(function(){
    //     //获取当前的时间
    //     // let nowTime = document.querySelector('.countdown-desc strong');
    //     let h = document.querySelector('.timmer__unit--hour')
    //     let m = document.querySelector('.timmer__unit--minute')
    //     let s = document.querySelector('.timmer__unit--second')
    //     let endTime = new Date('2023-5-29 12:00')
    //     time()
    //     setInterval(time,1000)
    //     function time(){
    //         let nowTime = new Date()
    //         let times = endTime - nowTime;
    //         console.log(times);
    //         // //小时
    //         // console.log(times/1000/60/60);
    //         // //分
    //         // console.log(times/1000/60%60);
    //         // //毫秒
    //         // console.log(times/1000%60);
    //         h.innerHTML=~~(times/1000/60/60)
    //         m.innerHTML=~~(times/1000/60%60)
    //         s.innerHTML=~~(times/1000%60)
    //     }
    // })()


    ; (function () {
        // //获取当前的时间
        let nowTime = Number(document.querySelector('.countdown-desc strong').innerHTML.slice(0, 2));
        let h = document.querySelector('.timmer__unit--hour')
        let m = document.querySelector('.timmer__unit--minute')
        let s = document.querySelector('.timmer__unit--second')
        let timer = null;
        console.log(nowTime);//12
        //set语法会修改当前的时间   
        let now = new Date();
        console.log(now);//当前的时间
        //设置多少时间 12点
        now.setHours(nowTime)
        //设置分钟
        now.setMinutes(53)
        now.setSeconds(00)
        console.log(now);//今天的时间 设置固定的小时和分钟秒 
        //设置3个小时后的时间------
        now.setHours(now.getHours() + 3)
        console.log(now);

        //获取现在的时间---计时器--计算到达三个小时后的时间的距离

        time()
        timer = setInterval(time, 1000)
        function time() {
            let nowTime = new Date()
            let times = now - nowTime;
            console.log(times);
            if (times >= 0) {
                h.innerHTML = ~~(times / 1000 / 60 / 60)
                m.innerHTML = ~~(times / 1000 / 60 % 60)
                s.innerHTML = ~~(times / 1000 % 60)
            } else {
                //清空计时器
                clearInterval(timer)

                // document.querySelector('.countdown-desc strong').innerHTML='13:00';
                // //
                // nowTime = Number(document.querySelector('.countdown-desc strong').innerHTML.slice(0, 2));
                // console.log(nowTime);//12
                // //设置多少时间 12点
                // now.setHours(nowTime)
                // //设置分钟
                // now.setMinutes(48)
                // now.setSeconds(0)
                // console.log(now);//今天的时间 设置固定的小时和分钟秒 
                // //设置3个小时后的时间------
                // now.setHours(now.getHours() + 3)
                // console.log(now);

            }

        }

    })()


    //8. 无缝轮播---
    /* 
      <a href="javascript:;" class="iconfont icon-zuojiantou1"></a>
     <a href="javascript:;" class="iconfont icon-youjiantou1"></a> */
    ; (function () {
        //seckill-list
        //1. 获取无缝左右箭头元素
        let next = document.querySelector('.seckill-list .icon-youjiantou1')
        let prev = document.querySelector('.seckill-list .icon-zuojiantou1')
        //2. 获取操作的移动容器ul容器 
        let contentUl = document.querySelector('.slider_wrapper');
        //轮播开始位置 下标0开始
        let index = 0;
        //3. 封装函数
        function lunbo() {
            //点击右侧按钮 下标++ 
            index++;//index=1 left=-800px index=2 left=1600px index=3 left=2400   index=4
            console.log(index);
            //移动的距离index*li宽度 设置给contentUl容器
            contentUl.style.left = index * -800 + 'px';
            contentUl.style.transition = 'all 1s'
            //需要判断index=最后一个元素位置
            if (index == 3) {
                index = 0;
                //去掉过渡效果 等1s 等最后一个动画做完 瞬间移动到0的位置 不要动画
                setTimeout(() => {
                    contentUl.style.transition = 'none'
                    contentUl.style.left = '0'
                }, 1000)
            }
        }
        //点击右侧按钮--执行轮播效果
        next.onclick = lunbo;
        //点击左侧按钮--- 
        prev.onclick = function () {
            index--;//
            //需要判断index==-1是最一个位置
            if (index == -1) {
                index = 3;//如果是第一个位置 下表变成最大值 瞬间移动ul容器 不加动画
                contentUl.style.left = index * -800 + 'px';
                contentUl.style.transition = 'none';
                index = index - 1;
            }
            console.log(index);
            //执行ul动画
            setTimeout(() => {
                //移动的距离index*li宽度 设置给contentUl容器
                contentUl.style.left = index * -800 + 'px';
                contentUl.style.transition = 'all 1s'
            }, 0)
        }


        // //无缝自动轮播
        // setInterval(()=>{
        //     lunbo();
        // },2000)

    })()

    //9. 楼宇导航
    /*
        思路：
            1. 获取操作的元素 内容区域item容器
            2. 内容区域每个区域距离顶部的高度   offsetTop
            3. 把所有的内容的高度存储一个数组容器 floor=[] 
            4. 滚动事件 获取滚动的高度
            5. 判断滚动的高度和内容距离顶部的高度的关系   内容距离顶部的高度 <=滚动的高度 <下一个内容距离顶部高度 查看当前的内容 楼宇高亮
    
    */
    ; (function () {
        //1. 获取操作元素
        //所有的额容器内容
        let items = document.querySelectorAll('.item_ele');
        //获取楼宇容器 控制位置
        let louyu = document.querySelector('.elevator')
        //获取楼宇层a
        let elevator = document.querySelectorAll('.elevator .elevator_lk')
        //获取返回顶部的按钮容器
        let last_item=document.querySelector('.last_item')
        //2. 获取所有内容距离顶部的高度
        let floor = [];
        // console.log(items[0].offsetTop);
        items.forEach(ele => {
            floor.push(ele.offsetTop)
        })
        console.log(floor);
        //楼层高亮的class名字：elevator_active

        //3. 封装一个函数让其他的元素不高亮
        function clear() {
            elevator.forEach(ele => {
                ele.className = 'elevator_lk'
            })
        }

        //4. 滚动效果----------------
        window.onscroll = function () {
            //滚动的高度
            let height = document.documentElement.scrollTop;
            console.log(height);
            //判断楼宇导航右侧位置---
            if(height>400){
                louyu.style.top='75px'
            }else{
                louyu.style.top='800px'
            }
            //判断是否显示返回顶部按钮
            if(height>800){
                last_item.style.display='block'
            }else{
                last_item.style.display='none'
            }

            //判断区间高亮楼宇导航
            if(height < floor[0]){
                clear();//其他楼层不高亮

            }else if (height >= floor[0] && height < floor[1]) {
                clear();//其他楼层不高亮
                //第一楼层高亮
                elevator[0].className = 'elevator_lk elevator_active'
            } else if (height >= floor[1] && height < floor[2]) {
                clear();//其他楼层不高亮
                //第二楼层高亮
                elevator[1].className = 'elevator_lk elevator_active'
            }
            else if (height >= floor[2] && height < floor[3]) {
                clear();//其他楼层不高亮
                //第三楼层高亮
                elevator[2].className = 'elevator_lk elevator_active'
            }
            else if (height >= floor[3]) {
                clear();//其他楼层不高亮
                //第四楼层高亮
                elevator[3].className = 'elevator_lk elevator_active'
            }

        }

        //5. 点击楼宇导航层--页面展示对应的楼层的内容区域
        elevator.forEach((ele, index) => {
            ele.onclick = function () {
                clear()
                // console.log('ele', ele,index);
                ele.className = 'elevator_lk elevator_active'
                //浏览器滚动的高度=0 返回顶部
                //到达某一个楼层  浏览器滚动的高度=当前楼层对应的内容距离顶部的高度值
                document.documentElement.scrollTop = floor[index];
            }
        })

        
        //6. 返回顶部按钮-----
        last_item.onclick=function(){
            document.documentElement.scrollTop=0;
        }


    })()
